<template>
  <div class="content">
    <button class="switch" @click="flag = !flag">切换</button>
    <!-- 测试卸载生命周期 -->
    <directiveA v-if="flag" v-move:aaa.xiaopin="{background: 'red'}"></directiveA>
    <!-- 测试更新生命周期 -->
    <directiveA v-move:aaa.xiaopin="{background: 'red', flag}"></directiveA>
  </div>
</template>

<script setup lang="ts">
import {ref, Directive, DirectiveBinding} from "vue"
import directiveA from "./components/directiveA.vue"

let flag = ref<Boolean>(true)

type Dir = {
  background: String
}

const vMove: Directive = {
  created() {
    console.log("======>", "created")
  },
  beforeMount() {
    console.log("======>", "beforeMount")
  },
  /* mounted(...args:Array<any>) {
    console.log("======>", "mounted")
    console.log(args) // [el, {arg: aaa, modifiers: {xiaopin: true}, value: {background: 'red'}}, VirtualNode, PreviousVirtualNode]
  }, */
  mounted(el: HTMLElement, dir: DirectiveBinding<Dir>, vnode: any, prevVnode: any) {
    console.log("======>", "mounted")
    console.log(dir.value.background)
    el.style.background = dir.value.background
  },
  beforeUpdate() {
    console.log("======>", "beforeUpdate")
  },
  updated() {
    console.log("======>", "updated")
  },
  beforeUnmount() {
    console.log("======>", "beforeUnmount")
  },
  unmounted() {
    console.log("======>", "unmounted")
  }
}

</script>

<style lang="less" scoped>
.content {
  text-align: left;
}
h1 {
  line-height: 2.0;
}
.switch {
  display: inline-block;
  padding: 10px 24px;
  margin: 10px 0;
  background-color: #fff;
  border: 1px solid #ccc;
}
</style>